<template>
  <div class="booking-detail-container">
    <van-loading v-if="loading" class="loading" size="24px" vertical>加载中...</van-loading>
    <template v-else>
      <div class="detail-card">
        

        <!-- 已完成状态显示诊断结果 -->
        <div v-if="bookingDetail.status === 4" class="info-section">
          <div class="section-title">诊断结果</div>
          <van-cell-group inset>
            <van-cell title="诊断结果" :value="bookingDetail.diagnosis || '暂无诊断结果'" />
            <van-cell title="医生建议" :value="bookingDetail.doctorAdvice || '暂无医生建议'" />
            <van-cell title="开具处方" :value="bookingDetail.prescription || '暂无处方信息'" />
          </van-cell-group>
        </div>

        <!-- 预约信息 -->
        <div class="info-section">
          <div class="section-title">预约信息</div>
          <!-- 待就诊状态突出显示时间信息 -->
          <div v-if="bookingDetail.status === 2" class="highlight-section">
            <div class="highlight-time">
              <div class="date">{{ bookingDetail.scheduleDate }}</div>
              <div class="time">{{ bookingDetail.startTime }}-{{ bookingDetail.endTime }}</div>
            </div>
          </div>
          <van-cell-group inset>
            <van-cell title="预约状态">
              <template #value>
                <van-tag :type="getStatusType(bookingDetail.status)" size="medium">
                  {{ getStatusText(bookingDetail.status) }}
                </van-tag>
              </template>
            </van-cell>
            <van-cell title="预约号" :value="bookingDetail.bookingId" />
            <van-cell title="就诊日期" :value="bookingDetail.scheduleDate" />
            <van-cell title="就诊时间" :value="`${bookingDetail.startTime}-${bookingDetail.endTime}`" />
            <van-cell title="挂号费用" :value="`¥${bookingDetail.price}`" />
            <van-cell title="预约时间" :value="bookingDetail.createdAt" />
          </van-cell-group>
        </div>
        <!-- 待付款状态显示支付按钮 -->
        <div v-if="bookingDetail.status === 1" class="payment-section">
          <van-button type="primary" block @click="showPaymentPopup">去付款</van-button>
        </div>

        <!-- 医生信息 -->
        <div class="info-section">
          <div class="section-title">医生信息</div>
          <van-cell-group inset>
            <van-cell center>
              <template #title>
                <div class="doctor-info">
                  <van-image
                    :src="bookingDetail.imgUrl"
                    width="60"
                    height="60"
                    radius="4"
                  />
                  <div class="doctor-details">
                    <div class="doctor-name">{{ bookingDetail.doctorName }}</div>
                    <div class="doctor-title">{{ bookingDetail.title }}</div>
                    <div class="department">{{ bookingDetail.departmentName }}</div>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>

        <!-- 就诊人信息 -->
        <div class="info-section">
          <div class="section-title">就诊人信息</div>
          <van-cell-group inset>
            <van-cell title="姓名" :value="bookingDetail.patientName" />
            <van-cell title="性别" :value="bookingDetail.gender" />
            <van-cell title="年龄" :value="bookingDetail.age" />
            <van-cell title="手机号" :value="bookingDetail.phone" />
            <van-cell title="身份证号" :value="bookingDetail.identity" />
          </van-cell-group>
        </div>

      </div>
    </template>

    <!-- 支付方式选择弹窗 -->
    <van-popup v-model:show="showPayment" position="bottom" round>
      <div class="payment-popup">
        <div class="payment-title">选择支付方式</div>
        <div class="payment-options">
          <van-cell title="支付宝支付" is-link @click="handlePayment('alipay')" />
          <van-cell title="微信支付" is-link @click="handlePayment('wechat')" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showToast, showLoadingToast, showSuccessToast, showFailToast, closeToast, Button as VanButton } from 'vant';
import { getBookingByIdAPI, updateBookingStatusAPI } from '../../api/book/bookRequest';

const route = useRoute();
const router = useRouter();
const loading = ref(true);
const bookingDetail = ref({});
const showPayment = ref(false);

// 获取预约详情
const fetchBookingDetail = async () => {
  try {
    const bookingId = route.query.bookingId;
    if (!bookingId) {
      showToast('预约ID不存在');
      return;
    }

    const response = await getBookingByIdAPI(bookingId);
    if (response.success) {
      bookingDetail.value = response.data;
    } else {
      showToast(response.errMsg || '获取预约详情失败');
    }
  } catch (error) {
    console.error('获取预约详情失败:', error);
    showToast('获取预约详情失败');
  } finally {
    loading.value = false;
  }
};

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case 1: return 'warning';
    case 2: return 'primary';
    case 3: return 'processing';
    case 4: return 'success';
    case 0: return 'danger';
    default: return 'default';
  }
};

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 0: return '已取消';
    case 1: return '待付款';
    case 2: return '待就诊';
    case 3: return '就诊中';
    case 4: return '已完成';
    default: return '未知状态';
  }
};

onMounted(() => {
  fetchBookingDetail();
});

// 显示支付弹窗
const showPaymentPopup = () => {
  showPayment.value = true;
};

// 处理支付逻辑
const handlePayment = async (paymentType) => {
  showPayment.value = false;
  const loading = showLoadingToast({
    message: '正在处理支付...',
    forbidClick: true,
  });

  try {
    // 调用后端支付接口
    const res = await updateBookingStatusAPI(bookingDetail.value.bookingId);
    if (res.success) {
      // 支付成功
      closeToast();
      // 更新订单状态
      bookingDetail.value.status = 2; // 更新为待就诊状态
      showSuccessToast('支付成功');
      // 不再返回上一页，用户可以查看更新后的预约状态
    } else {
      showFailToast(res.errMsg || '支付失败');
    }
  } catch (error) {
    console.error('支付失败:', error);
    showFailToast('支付失败');
  } finally {
    closeToast();
  }
};
</script>

<style scoped>
.booking-detail-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 16px;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.detail-card {
  overflow: hidden;
}

.info-section {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.section-title {
  padding: 16px 16px 8px;
  font-size: 15px;
  font-weight: bold;
  color: #323233;
}

.doctor-info {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.doctor-details {
  margin-left: 12px;
}

.doctor-name {
  font-size: 16px;
  font-weight: bold;
  color: #323233;
  margin-bottom: 4px;
}

.doctor-title,
.department {
  font-size: 14px;
  color: #969799;
  margin-top: 2px;
}

.payment-section {
  padding: 0 16px 16px;
}

.payment-section .van-button {
  border-radius: 8px;
}

.highlight-section {
  background: #f2f7ff;
  padding: 16px;
  margin: 0 16px 12px;
  border-radius: 8px;
  text-align: center;
}

.highlight-time {
  color: #1989fa;
}

.highlight-time .date {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.highlight-time .time {
  font-size: 16px;
}

.payment-popup {
  padding: 20px;
}

.payment-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.payment-options {
  margin-top: 10px;
}
</style>